<template>
  <div class="all">
    <div class="infor">
      <div class="up">
        <img
          class="xwd"
          src="../assets/img/right/信息 (1)_wps图片.png"
          alt=""
        />
        <p>信息反馈</p>
      </div>
      <div class="op">
        <img class="xwd" src="../assets/img/right/微信_wps图片.png" alt="" />
        <div class="wei">
          <img class="weiwei" src="../assets/img/right/微信码.png" alt="" />
          <span>关注公众号</span>
        </div>
      </div>
      <div class="up">
        <img
          class="xwd"
          src="../assets/img/right/服务 耳机_wps图片.png"
          alt=""
        />
        <p>在线客服</p>
      </div>
    </div>
    <div class="sma">
      <img class="dwn" @click="updde" src="../assets/img/right/图标_wps图片.png" alt="" />
      <div v-show="sti">
      <img class="dde" src="../assets/img/right/大图0.png" alt="">
      <img class="chacha" @click="upcha" src="../assets/img/right/叉叉_wps图片.png" alt="">
      </div>
    </div>
    <div class="back" v-show="uptop" @click="bactop">
      <img src="../assets/img/right/返回顶部.png" alt="">
      <p>返回顶部</p>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            sti: false,
            uptop:false
        }
    },
    // 生命周期
    mounted () {
   window.addEventListener('scroll',this.handleSrcoll,true)
 },
  destroyed(){
    window.removeEventListener('scroll',this.handleSrcoll)
  },
  // 函数
    methods: {
      // 图形显示函数
        updde(){
            this.sti=true
        },
        upcha() {
            this.sti=false
        },
           handleSrcoll(){
     let scrllTop=window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop
     if(scrllTop>=3000){
        this.uptop=true
      }else{
        this.uptop=false
      } 
   },
    // 返回顶部函数
    bactop(){
      let scrollTop=document.documentElement.scrollTop  || document.body.scrollTop         
       let  timer1= setInterval(() => {
                if(scrollTop<=0)clearInterval(timer1)
                scrollTop -=100
                document.documentElement.scrollTop=scrollTop
            document.body.scrollTop=scrollTop
            }, 10);
            // 兼容性问题  需要两个方式都修改
            document.documentElement.scrollTop=0
            document.body.scrollTop=0
    }   
    },
   
    
};
</script>

<style lang="scss" scoped>
.all {
  border-left: 1px solid #e7e7e7;
  bottom: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 39px;
  background: rgba(255, 255, 255, 0.8);

  // 返回顶部
  .back{
   position: relative;
    img{
      width: 26px;
      height: 26px;
      margin-top: 16px;
      padding: 0 7px;
    }
    p{
      width: 60px;
        font-size: 14px;
        line-height: 22px;
        border-radius: 4px;
        box-shadow: 0 0 3px 0 black;
        position: absolute;
        background-color: white;
        border: 1px solid #e7e7e7;
        top: 17px;
        left: -64px;
        display: none;
    }
  }
  .back:hover >p{
    display: block;

  }
  .back:hover > img{
   
    background-color: #ddd;
  }

  div.sma {
    // margin-top: 220px;
    margin-top: 26vh;
    position: relative;
    img.dwn {
      width: 32px;
      height: 32px;
      padding: 0 3px;
    }
    img.dwn:hover{
         background-color: #ddd; 
    }
    img.dde{
        position: absolute;
        top: -266px;
        left: -168px;
    }
    img.chacha{
        width: 24px;
        height: 24px;
        position: absolute;
        top: -266px;
        left: -40px;
    }
  }
  //  上面三个图
  .infor {
    // margin-top: 330px;
    margin-top: 30vh;
    div.up:hover > p {
      display: block;
    }
    div.up:hover > img.xwd {
      background-color: #ddd;
    }
    div.op:hover > div.wei {
      display: block;
    }
    div {
      margin-top: 20px;
      position: relative;
      p {
        width: 60px;
        font-size: 14px;
        line-height: 22px;
         border-radius: 4px;
        box-shadow: 0 0 3px 0 black;
        position: absolute;
        background-color: white;
        border: 1px solid #e7e7e7;
        top: 0px;
        left: -64px;
        display: none;
      }

      img.xwd {
        width: 24px;
        height: 24px;
        padding: 0 9px;
      }
      div.wei {
        width: 120px;
        position: absolute;
        top: -140px;
        left: -120px;
        text-align: center;
        border: 1px solid #e7e7e7;
        background-color: white;
        font-size: 14px;
        display: none;
      }

      img.weiwei {
        width: 120px;
        height: 120px;
      }
    }
  }
}
</style>
